<template>
  <el-card shadow="never">
    <div slot="header"></div>
    <ul class="post-list">
      <li v-for="(item, index) in list" :key="index" class="post-item">
        <a :href="'/articles/'+item.author+'/' + item.id">
          <h3 class="title">{{ item.title }}</h3>
          <p class="abstract">{{ item.summary }}</p>
        </a>
        <div class="details">
          <a :href="'/articles/' + item.author" class="left">
            <span style="color: #5fb878; text-decoration: underline">{{
              item.author
            }}</span>
          </a>
          <div class="right">
            <span>{{ format(item.createTime) }}</span>
            <span>
              <i
                class="layui-icon layui-icon-praise"
                style="vertical-align: bottom"
              ></i>
              {{ item.hits }}
            </span>
            <span>
              <i class="el-icon-chat-dot-round"></i>
              {{ item.comments }}
            </span>
            <span>
              <i class="el-icon-view"></i>
              {{ item.views }}
            </span>
          </div>
        </div>
      </li>
    </ul>
    <el-pagination
      class="page-box"
      background
      layout="prev, pager, next"
      :hide-on-single-page="true"
      :total="total"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </el-card>
</template>
<script>
import { parseTime } from "@/utils";
import reqeust from "@/utils/request";

export default {
  props: {
    author: String,
  },
  data() {
    return {
        list: [],
        total: 0,
        current: 1,
    };
  },
  methods: {
      handleCurrentChange(current) {
        this.current = current;
      },
      format(time) {
          return parseTime(time);
      },
      getArticleList() {
        reqeust.get("/articles/author", {
          params: {
            current: this.current,
            author: this.author
          }
        }).then(res => {
          this.list = res.data.list;
          this.total = res.data.total;
        });
      }
  },
  created() {
    this.getArticleList();
  }
};
</script>